import React from 'react';
import {BrowserRouter as Router, Route, Link, Prompt} from 'react-router-dom'

class Form extends React.Component {

    constructor() {
        super();
        this.state = {
            isBlock: false
        };
    }

    submit(event) {
        event.preventDefault();
        event.target.reset();
        this.setState({
            isBlock: false
        });
        // event.target.value = '';
    }

    valueChanged(event) {
        this.setState({
            isBlock: event.target.value.length > 0
        })
    }

    render() {
        const isBlock = this.state.isBlock;
        // const {isBlock} = this.state
        return (<div>
            <Prompt when={isBlock} message={(location)=> {
                return (`你真的要跳转到 ${location.pathname} 吗?`)
            }}/>
            <div>{isBlock ? "不能跳转" : "可以跳转"}</div>
            <form onSubmit={this.submit.bind(this)}>
                <input type="text" onChange={this.valueChanged.bind(this)} size="50" placeholder="输入内容后就不能直接跳转了!"/>
                <input type="submit" value="Submit"/>
            </form>
        </div>);
    }
}

const App = ()=> {
    return <Router basename="/ck">
        <div>
            <Link to="/">Index</Link>
            <br />
            <Link to="/page2">Page2</Link>
            <br />
            <Link to="/page3">Page3</Link>
            <Route path="/" exact component={Form}/>
            <Route path="/:pageId" render={({match})=>(<div>{match.params.pageId}</div>)}></Route>
        </div>
    </Router>;
}

export default App;

